<template>
	<div id="WechatDiv">
		<!-- 头部搜索 -->
		<div class="header" >		
				<div class="header_search">
					<router-link to="/search" class="mui-icon mui-icon-search">
						<span class="search_shop">搜索您想要购买的商品</span>
					</router-link>
				</div>
		</div>
		<!-- 轮播图 -->
		<div class="swiper-container background">  
	    	<div class="swiper-wrapper">  
			       <img src="http://pic20.taocz.cn/imgupload/12/6c/201704250854304178.jpg" alt="" class="swiper-slide">  
			       <img src="http://pic20.taocz.cn/imgupload/50/60/201703020901027247.jpg" alt="" class="swiper-slide"> 
		        
    		</div>  
			<!-- 如果需要分页器 -->
	    	<!-- <div class="swiper-pagination"></div> -->
		</div>
   
		<!--中间分类  -->
		<ul id="ul">
			<li><router-link to='/fresh'><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2588011134,2801268609&fm=23&gp=0.jpg">楼口生鲜</router-link></li>
			<li><router-link to='/greens'><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1512616669,1520073463&fm=23&gp=0.jpg">网上菜场</router-link></li>
			<li><router-link to='/egg'><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1482997101,1430703833&fm=23&gp=0.jpg">肉禽蛋品</router-link></li>
			<li><router-link to='/chang'><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3341936648,362111357&fm=23&gp=0.jpg">常州原产地</router-link></li>
			<li><router-link to='/frozen'><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=940430281,1087054222&fm=23&gp=0.jpg">速冻速食</router-link></li>
			<li><router-link to='/bar'><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=367919188,3334375195&fm=23&gp=0.jpg">乳品酒水</router-link></li>
			<li><router-link to='/clean'><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1476465764,1955736390&fm=23&gp=0.jpg">日白清洁</router-link></li>
			<li><router-link to='/house'><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1032770320,1081451520&fm=23&gp=0.jpg">家政服务</router-link></li>
		</ul>
		<!-- <router-view></router-view> -->
		<!--商品需求分类  -->
		<div class="menu_list">
			<div class="menu_list_ul">
			    <!-- 常州源产地 -->
				<div class="menu_shop">
					<!-- 标题和更多按钮 -->
					<div class="menu_title cz_title" >
						<div class="menu_detail_title" >常州源产地</div>
						<div class="menu_more">更多<router-link to="/morecz" class="mui-icon mui-icon-arrowright"></router-link></div>
					</div>
					<!-- 商品 -->
					<div class="shops">
						<ul class="shops_ul">
							<li class="shop_detail" v-for="(items,index) in dataCzArr" @click="skip(items)">
								<div class="shops_img" ><img :src="items.img" alt="" ></div>								
								<div class="shops_msg">
									<p class="shop_inform">{{items.information}}</p>
									<p class="shop_size">{{items.etalon}}</p>
									<p class="shop_arrive">次日达</p>
									<p class="shop_Price_cart">
										<span class="shop_price">￥{{items.price}}</span>
										<!--购物车-->
										<span class="shop_cart" @click.stop.prevent="add2(index)"><img src="../assets/img1/cart1_03.png" alt=""></span>
									</p>
								</div>
								
							</li>
							
						</ul>
					</div>
				</div>
				<!-- 楼口鲜果 -->
				<div class="menu_shop">
					<!-- 标题和更多按钮 -->
					<div class="menu_title">
						<div class="menu_detail_title" >楼口鲜果</div>
						<div class="menu_more" @click="add">更多<router-link to="/fruit" class="mui-icon mui-icon-arrowright"></router-link></div>
					</div>
					<!-- 商品 -->
					<div class="shops">
						<ul class="shops_ul">
							<li class="shop_detail" v-for="(items,index) in dataFruitArr" @click="skip(items)">
								<div class="shops_img"><img :src="items.img" alt=""></div>
								<div class="shops_msg">
									<p class="shop_inform">{{items.information}}</p>
									<p class="shop_size">{{items.etalon}}</p>
									<p class="shop_arrive">次日达</p>
									<p class="shop_Price_cart">
										<span class="shop_price">￥{{items.price}}</span>
										<!--购物车-->
										<span class="shop_cart" @click.stop.prevent="add3(index)"><img src="../assets/img1/cart1_03.png" alt=""></span>
									</p>
								</div>
								
							</li>
							
						</ul>
					</div>
				</div>
				
				<!-- 网上菜场 -->
				<div class="menu_shop">
					<!-- 标题和更多按钮 -->
					<div class="menu_title">
						<div class="menu_detail_title" >网上菜场</div>
						<div class="menu_more" @click="add">更多<router-link to="/greens" class="mui-icon mui-icon-arrowright"></router-link></div>
					</div>
					<!-- 商品 -->
					<div class="shops">
						<ul class="shops_ul">
							<li class="shop_detail" v-for="(items,index) in dataVegetableArr" @click="skip(items)">
								<div class="shops_img"><img :src="items.img" alt=""></div>									
								<div class="shops_msg">
									<p class="shop_inform">{{items.information}}</p>
									<p class="shop_size">{{items.etalon}}</p>
									<p class="shop_arrive">次日达</p>
									<p class="shop_Price_cart">
										<span class="shop_price">￥{{items.price}}</span>
										<!--购物车-->
										<span class="shop_cart" @click.stop.prevent="add4(index)"><img src="../assets/img1/cart1_03.png" alt=""></span>
									</p>
								</div>
								
							</li>
							
						</ul>
					</div>
				</div>
				<!-- 肉禽蛋品 -->
				<div class="menu_shop">
					<!-- 标题和更多按钮 -->
					<div class="menu_title">
						<div class="menu_detail_title" >肉禽蛋品</div>
						<div class="menu_more" @click="add">更多<router-link to="/egg" class="mui-icon mui-icon-arrowright"></router-link></div>
					</div>
					<!-- 商品 -->
					<div class="shops">
						<ul class="shops_ul">
							<li class="shop_detail" v-for="(items,index) in dataEggsArr" @click="skip(items)">
								<div class="shops_img"><img :src="items.img" alt=""></div>								
								<div class="shops_msg">
									<p class="shop_inform">{{items.information}}</p>
									<p class="shop_size">{{items.etalon}}</p>
									<p class="shop_arrive">次日达</p>
									<p class="shop_Price_cart">
										<span class="shop_price">￥{{items.price}}</span>
										<!--购物车-->
										<span class="shop_cart" @click.stop.prevent="add5(index)"><img src="../assets/img1/cart1_03.png" alt=""></span>
									</p>
								</div>
								
							</li>
							
						</ul>
					</div>
				</div>
				<!-- 粮油调味 -->
				<div class="menu_shop">
					<!-- 标题和更多按钮 -->
					<div class="menu_title">
						<div class="menu_detail_title" >粮油调味</div>
						<div class="menu_more" @click="add">更多<router-link to="/oil" class="mui-icon mui-icon-arrowright"></router-link></div>
					</div>
					<!-- 商品 -->
					<div class="shops">
						<ul class="shops_ul">
							<li class="shop_detail" v-for="(items,index) in dataOilArr" @click="skip(items)">
								<div class="shops_img"><img :src="items.img" alt=""></div>
								<div class="shops_msg">
									<p class="shop_inform">{{items.information}}</p>
									<p class="shop_size">{{items.etalon}}</p>
									<p class="shop_arrive">次日达</p>
									<p class="shop_Price_cart">
										<span class="shop_price">￥{{items.price}}</span>
										<!--购物车-->
										<span class="shop_cart" @click.stop.prevent="add6(index)"><img src="../assets/img1/cart1_03.png" alt=""></span>
									</p>
								</div>
								
							</li>
							
						</ul>
					</div>
				</div>
				<!-- 蛋糕 -->
				<div class="menu_shop">
					<!-- 标题和更多按钮 -->
					<div class="menu_title">
						<div class="menu_detail_title" >蛋糕</div>
						<div class="menu_more" @click="add">更多<router-link to="/cake" class="mui-icon mui-icon-arrowright"></router-link></div>
					</div>
					<!-- 商品 -->
					<div class="shops">
						<ul class="shops_ul">
							<li class="shop_detail" v-for="(items,index) in dataCakeArr" @click="skip(items)">
								<div class="shops_img"><img :src="items.img" alt=""></div>
								<div class="shops_msg">
									<p class="shop_inform">{{items.information}}</p>
									<p class="shop_size">{{items.etalon}}</p>
									<p class="shop_arrive">次日达</p>
									<p class="shop_Price_cart">
										<span class="shop_price">￥{{items.price}}</span>
										<!--购物车-->
										<span class="shop_cart" @click.stop.prevent="add1(index)"><img src="../assets/img1/cart1_03.png" alt=""></span>
									</p>
								</div>
								
							</li>
							
						</ul>
					</div>
				</div>
				<!-- 蛋糕 -->
			</div>
		</div>
	</div>    
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../assets/swiper-3.4.0.min.css");  

	*{
		margin: 0;
		padding: 0;
		list-style: none;
		text-decoration: none;
	}
	a{
		color:#8b8b8b;
		font-size:2rem;
	}
	#WechatDiv{
		width: 100%;
	}
	.header{
		width: 100%;
		height:4rem;
		padding: 0.5rem 0;
		background: red;
	}
	.header_search{
		width: 94%;
		height:3rem;
		line-height: 3rem;
		background: #fff;
		margin-left: 3%;
	}
	.header_search .mui-icon{
		color:red;
		height:3rem;
		line-height: 3rem;
		font-size:3rem;
		display: inline-block;
	}
	.header_search .mui-icon span{
		font-size: 2rem;
		height:2.6rem;
		line-height: 2.6rem;
		display: inline-block;
		color:#999;
	}
	.search_shop{
		text-indent: 2rem;
		height:2rem;
		font-size:1.5rem;
		line-height: 2rem;
		color:#ccc;
	}
	
	/*留菜单分类*/
	#ul{
		font-size:1.8rem;
		background:#fff;	
		float:left;
		border-bottom: 1rem solid #f0f0f0;
	}
	#ul li{
		width:7.8125rem;
		width:25%;
		float:left;
		color:#808080;
		text-align: center;
	}
	#ul li a{
		color:#666;
		font-size: 1.6rem;
	}
	#ul li img{
		/*width:7rem;*/
		width:100%;
		height:5.7rem;
		margin-top:1rem;
	}
	/*商品需求分类*/
	.menu_list{
		width: 100%;
	}
	.menu_list_ul{
		width: 100%;
		padding-bottom: 3rem;
		background: #f0f0f0;
		padding-bottom: 4rem;
	}
	.menu_shop{
		background: #f0f0f0;
	}

	.menu_title{
		margin-top: 1rem;
		box-sizing: border-box;
		width: 100%;
		height: 3.5rem;
		line-height: 2.5rem;
		padding:0.5rem;
		display: flex;
		background:#fff;
		font-size:2rem;
		justify-content: space-between;
	}
	.menu_detail_title,.menu_more{
		flex: 1;
	}
	.menu_detail_title{
		text-align: left;
		font-weight: bold;
		color:red;
		border-left:0.5rem solid red; 
		text-indent: 0.5rem;
	}
	.menu_more{
		text-align: right;
		color: #8b8b8b;
	}
	/*商品图片信息细节描述*/
	.shops{
		width: 100%;
		text-align: left;
	}
	.shops_ul{
		width:100%;
		display: flex;
		flex-wrap:wrap; 
		justify-content: space-around;
	}
	.shop_detail{
		width: 33%;
		background: #fff;
	}
	.shops_img img{
		width: 100%;
	}	
	.shop_size,.shop_arrive{
		height: 1.5rem;
		line-height: 1.5rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size:0.8rem;
	}
	.shop_arrive{

	}
	.shops_msg p{
		text-align: left;
		text-indent: 0.5rem;
	}
	.shop_inform{
		white-space:nowrap;/* 不换行 */  
	    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */  
	    text-overflow:ellipsis;
	    color:#000;
	    
	}
	.shop_size,.shop_arrive{
		color:#8b8b8b;
	}
	.shop_price{
		color:red;
		font-size: 1.6rem;
	}
	.shop_Price_cart{
		display: flex;
		justify-content: space-between;
	}
	.shop_price{
		text-align: left;
	}
	.shop_cart{
		width: 2rem;
		margin-right: 0.5rem;
	}
	.shop_cart img{
		width: 1.5rem;
	}
</style>

<script>
	import $ from 'jquery'
	import Swiper from '../../static/swiper-3.4.0.min.js' 
	export default {
	  name: 'Wechat',
	  dataArr:[],
	   //本地存储
	  bol:true,
	  
	  data () {
	    return {

	   		//设置一个盛放数据的空数组
	  		GoodArr:[],

	    	// 首页商品导航
	     dataMenu:[],
	     // 常州源产地 & 常州更多按钮
	     dataCzArr:[],
	     dataCzMoreArr:[],
	     // 楼口鲜果 &更多
	     dataFruitArr:[],
	     dataFruitMoreArr:[],
	     // 网上菜场 &更多
	     dataVegetableArr:[],
	     dataVegetableMoreArr:[],
	     // 肉禽蛋品 &更多
	     dataEggsArr:[],
	     dataEggsMoreArr:[],
	     // 粮油调味 &更多
	     dataOilArr:[],
	     dataOilMoreArr:[],
	     // 蛋糕 &更多
	     dataCakeArr:[],
	     dataCakeMoreArr:[],
	     
	     
	    }
	  },
	  mounted () {  
    		this.lunbo()  
  		},
	 methods:{	
				add1:function(index){
					console.log(this.dataCakeArr[index]);
					this.GoodArr.push(this.dataCakeArr[index]);
					
				},
				add2:function(index){
					console.log(this.dataCzArr[index]);
					this.GoodArr.push(this.dataCzArr[index]);
				},
				add3:function(index){
					console.log(this.dataFruitArr[index]);
					this.GoodArr.push(this.dataFruitArr[index]);
				},
				add4:function(index){
					console.log(this.dataVegetableArr[index]);
					this.GoodArr.push(this.dataVegetableArr[index]);
				},
				add5:function(index){
					console.log(this.dataEggsArr[index]);
					this.GoodArr.push(this.dataEggsArr[index]);
				},
				add6:function(index){
					console.log(this.dataOilArr[index]);
					this.GoodArr.push(this.dataOilArr[index]);
				},
				add:function(index){
					console.log(index)
				},

				skip:function(i){
					localStorage.detail = JSON.stringify(i);
//					console.log("点击"+localStorage.detail);
					this.$router.push({ name: 'Detailpage'});
					$("#list").hide();
				},
				lunbo(){
			        var mySwiper = new Swiper ('.swiper-container', {
				    loop: true,
				    // 自动轮播时间
				    autoplay:2000,
				    // 如果需要分页器
				    // pagination:'.swiper-pagination',
				    autoplayDisableOnInteraction:false,
				    paginationClickable:true,
				    // effect:'cube',
	
				})
			}  


	},
	
	 created:function(){
	 			var url="../../static/api/vegetable.json";
                var _self=this;
                $.get(url,function(data){
                    // _self.datArr=eval("(" + data +")");
                    _self.dataArr=data ;
                    // console.log(_self.dataArr);

                    // 首页商品导航
                    _self.dataMenu = _self.dataArr.menu;
                     // console.log(_self.dataMenu);

                     // 常州源产地
                    _self.dataCzMoreArr = _self.dataArr.Changzhou;
                    // console.log(_self.dataCzMoreArr);
                    `` // console.log(_self.dataArr.Changzhou);
                    _self.dataCzArr = _self.dataCzMoreArr.slice(0,3);
                   
                    localStorage.a=JSON.stringify( _self.dataCzMoreArr) ;
                     // console.log(localStorage.a);
                    // 楼口鲜果
                    _self.dataFruitMoreArr = _self.dataArr.fresh_fruit;
                    // conso   le.log(_self.dataFruitMoreArr);
                     _self.dataFruitArr = _self.dataArr.fresh_fruit.slice(0,6);
                    // console.log(_self.dataFruitArr);
                    // 鲜果本地存储
                    localStorage.fruit=JSON.stringify( _self.dataFruitMoreArr) ;
                    // console.log(localStorage.fruit);
                    // 网上菜场
                    _self.dataVegetableMoreArr = _self.dataArr.internet_vegetable;
                    // console.log(_self.dataVegetableMoreArr);
                     _self.dataVegetableArr = _self.dataArr.internet_vegetable.slice(0,6);
                    // console.log(_self.dataVegetableArr);

                    // 肉禽蛋品
                    _self.dataEggsMoreArr = _self.dataArr.eggs;
                    // console.log(_self.dataEggsMoreArr);
                     _self.dataEggsArr = _self.dataArr.eggs.slice(0,3);
                    // console.log(_self.dataEggsArr);

                    // 粮油调味
                    _self.dataOilMoreArr = _self.dataArr.grain_oil;
                    // console.log(_self.dataOilMoreArr);
                     _self.dataOilArr = _self.dataArr.grain_oil.slice(0,3);
                    // console.log(_self.dataOilArr);

                    // 蛋糕
                    _self.dataCakeMoreArr = _self.dataArr.cake;
                    // console.log(_self.dataCakeMoreArr);
                     _self.dataCakeArr = _self.dataArr.cake.slice(0,3);
                    // console.log(_self.dataCakeArr);
                    // 蛋糕本地存储
                    localStorage.cake = JSON.stringify(_self.dataArr.cake);
                    // console.log(localStorage.cake);
          		})

       	},
     	  

       
       	beforeDestroy:function(){
//     		console.log(this.GoodArr);
       		localStorage.good = JSON.stringify(this.GoodArr);
       	}
     //  mounted (){
     // 	   // console.log('挂载好了');
     // 	   var mySwiper = new Swiper('.swiper-container', {
	    //    direction: 'horizontal',
	    //    loop: true,
	    //    pagination: '.swiper-pagination',
	    //    nextButton: '.swiper-button-next',
	    //    prevButton: '.swiper-button-prev'
     // })
     // console.log(mySwiper);
     // }


	}
</script>


